<!DOCTYPE html>
<html>
<head>
    <#import "../common/common.macro.ftl" as netCommon>
    <title>${title!"艺术上海"}</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="${keywords?if_exists}" />
    <meta name="description" content="${description?if_exists}" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="/static/css/bootstrap.mini.css" rel="stylesheet" />
    <link href="/static/css/style.css" rel="stylesheet" />
    <link href="/static/css/common/index.css" rel="stylesheet" />
    <link href="/static/css/footer/index.css" rel="stylesheet" />
    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <style>
        .weixin-pay{
            width: 800px;
            padding: 60px 0px;
            margin: 0 auto;
            display:none
        }
        .weixin-pay h4{
            text-align: center;
            font-size: 16px;
            line-height: 32px;
        }
        .weixin-pay .weixin-pay-code{
            width: 380px;
            height: 380px;
            text-align: center;
            margin: 20px auto;
        }

        .pay-state-box{
            width: 800px;
            padding: 60px 0px;
            margin: 0 auto;
            display: none;
        }
        .pay-state-box h3{
            text-align: left;
            font-size: 24px;
            line-height: 32px;
        }
        .pay-state-box p {
            margin-top: 20px;
            font-size: 14px;
        }
        .pay-state-box-control{
            margin-top: 30px;
            display: flex;
            align-items: center;
            justify-self: flex-start;
        }
        .pay-state-box-control a{
            margin-right: 10px;
            padding: 10px 20px;
            display: block;
            color: #ac2925;
            border: 1px #ac2925 solid;
        }
    </style>
</head>
<body>
<!-- header -->
<@netCommon.commonHeader "works" menu i18n/>

<!-- ========================= SECTION PAGETOP ========================= -->
<section class="section-pagetop bg">
    <div class="container">
        <h2 class="title-page">支付</h2>
    </div> <!-- container //  -->
</section>
<!-- ========================= SECTION INTRO END// ========================= -->

<!-- ========================= SECTION CONTENT ========================= -->
<section class="section-content padding-y">
    <div class="container" >

        <div class="row" id="pay-way-box">
            <main class="col-md-12">
                <div class="card" style="border: 4px solid #eee; width: 960px; margin: 40px auto; padding: 20px">
                    <div class="card-body border-top">
                        <h5>支付金额：¥<span id="money"></span></h5>
                        <p>请选择支付渠道</p>
                        <div class="row" style="margin-top: 24px;">
                            <div class="col-md-6 pay-way" style="font-size:18px;cursor: pointer; padding: 20px; font-weight: bold"   data-id="WX_NATIVE">
                                <img src="/static/svg/wxpay2.svg" style="width: 80px;margin-right: 20px"/>
                                微信支付
                            </div>
                            <div class="col-md-6 pay-way" style="font-size:18px;cursor: pointer;padding: 20px; font-weight: bold" data-id="ALI_WEB">
                                <img src="/static/svg/alipay.svg" style="width: 80px;margin-right: 20px"/>
                                支付宝支付
                            </div>
                        </div>


                    </div>
                </div> <!-- card.// -->
            </main> <!-- col.// -->

        </div>

        <div class="weixin-pay" id="weixin-pay">
                <h4>请打开微信客户端扫一扫二维码进行支付</h4>
                <div class="weixin-pay-code" id="weixin-pay-code">

                </div>
        </div>

        <div class="weixin-pay" id="ali-pay">

        </div>

        <div class="pay-state-box">
            <h3>支付成功！</h3>
            <p>卖家会尽快发货，请您保持通讯顺畅</p>
            <div class="pay-state-box-control">
                <a class="" href="/">回到首页</a>
                <a class="" href="/user/order">查看我的订单</a>
            </div>

        </div>

    </div> <!-- container .//  -->
</section>

<!-- footer -->

<!-- script -->
<@netCommon.commonScript />

<script src="/static/js/jquery.qrcode.min.js"></script>
<script>
    var money ;
    var sn;
    var payway;
    var url;
    $(function () {
        money =  getQueryVariable('money')
        sn=  getQueryVariable('sn')

        type = getQueryVariable('type')
        if(type===false){
            payway = "single"
        }
        if(sn===false){
            alert('非法链接');
            return;
        }
        if(money!==false){
            $('#money').html(money)
        }

        $(".pay-way").click(function () {
            var token = getToken();
            if(!token){
                checkLogin(window.location)
                return;
            }
           var paymentChannel =  $(this).attr("data-id");
           if(!paymentChannel){
               return;
           }
            var param
            if(payway=='single'){
                //单订单支付
                url = 'api/shop-center/app/mall/pay/pay2Single'
                param  ={
                    payMethod:'10',
                    paymentChannel:paymentChannel,
                    sn: sn,
                }
            }else{
                var snlist = sn.split('$')
                    //多订单支付
                url = 'api/shop-center/app/mall/pay/pay2Multiple'
                param  ={
                    payMethod:'10',
                    paymentChannel:paymentChannel,
                    sns: snlist,
                }
            }
            debugger;
            if(paymentChannel=='ALI_WEB'){
                param.returnUrl =  window.location.protocol+"//"+window.location.host+'/'+"user/order"
            }

            $.ajax({
                type: "post",
                url: baseUrl+url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    'lbv': '1.0',
                    'tenant' : 'PTC',
                    'token':  getToken(),
                },
                data: JSON.stringify(param),
                success: function (res) {
                    if(res && res.code && res.code==='0' && res.data){
                        if(res.data.biz && paymentChannel=='WX_NATIVE'){
                            $('#pay-way-box').hide()
                            $('#weixin-pay').show()
                            $('#weixin-pay-code').qrcode(res.data.biz.codeUrl);
                        }
                        if(res.data.biz && paymentChannel=='ALI_WEB'){
                            $('#pay-way-box').hide()
                            $("#ali-pay").html(res.data.biz.html);
                        }
                        queryOrderState();
                    }
                    else{
                        alert(res.msg);
                        if(res.code=='-3'){
                            relogin(window.location.href);
                        }
                        
                    }
                },
                error: function (res) {

                }
            });
        })



    })
    var time
    function queryOrderState() {
        time = setInterval(function() {
            getOrderDetail();

        }, 5000);
    }

    function getOrderDetail() {
        $.ajax({
            type: "get",
            url: baseUrl+'/api/shop-center/app/mall/order/get?sn='+sn,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
                'lbv': '1.0',
                'tenant' : 'PTC',
                'token':  getToken(),
            },

            success: function (res) {
                if(res && res.code && res.code==='0' && res.data && res.data.status =='30'){
                    $('#pay-way-box').hide();
                    $('#weixin-pay').hide();
                    $('.pay-state-box').show();
                    clearInterval(time);
                }
                
            },
            error: function (res) {

            }
        });
    }

</script>



</body>
</html>
